<template>
    <v-list style="user-select: none" nav :selected="selectedPages">
        <v-list-item
            v-for="(item, index) in menuItems"
            :key="index"
            :value="item.route"
            @click="router.push(item.route)"
        >
            <template v-slot:prepend>
                <v-avatar color="transparent">
                    <v-icon :icon="item.icon" :color="item.color"></v-icon>
                </v-avatar>
            </template>

            <v-list-item-title class="text-subtitle-1" v-text="item.text"></v-list-item-title>
        </v-list-item>
    </v-list>
</template>

<script setup lang="ts">
import { reactive, computed } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const selectedPages = computed(() => {
    const path = router.currentRoute.value.path;
    for (const item of menuItems) {
        if (path.startsWith(item.route)) {
            return [item.route];
        }
    }
    return [];
});

const menuItems = reactive([
    {
        icon: "mdi-star-outline",
        text: "我的收藏",
        route: "/star",
        color: "primary",
    },
    {
        icon: "mdi-playlist-music-outline",
        text: "播放列表",
        route: "/playlist",
        color: "primary",
    },
    {
        icon: "mdi-piano",
        text: "映射器",
        route: "/mapper",
        color: "primary",
    },
    {
        icon: "mdi-cog-outline",
        text: "设置",
        route: "/settings",
        color: "primary",
    },
]);
</script>
